<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:.2rem':'paddingTop:1.2rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
      <div class="container">

        <!--//团队业绩id0-->
        <div v-if="cid == 0">
          <div class="head">
            <ul class="db tac">
              <li>
                <div class="b">{{$t('income.doc1')}}</div>
                <span style="font-size: .44rem;">≈{{datainfo.totalAchievement}}</span>
              </li>
            </ul>
          </div>

          <!--<div class="head2">-->
            <!--<ul class="db tac">-->
              <!--<li>-->
                <!--<div class="b">新增业绩（USDT）</div>-->
                <!--<span>≈{{datainfo.minerAchievement}}</span>-->
              <!--</li>-->
              <!--<li>-->
                <!--<div class="b">扣减业绩（USDT）</div>-->
                <!--<span>≈{{datainfo.financialAchievement}}</span>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</div>-->
        </div>

        <!--//静态收益id1-->
        <div v-if="cid == 1">
          <div class="head">
            <ul class="db tac">
              <li>
                <div class="b">{{$t('doc.doc1')}}</div>
                <span style="font-size: .44rem;">≈{{datainfo.total}}</span>
              </li>
            </ul>
          </div>

          <!--<div class="head2">-->
            <!--<ul class="db tac">-->
              <!--<li>-->
                <!--<div class="b">{{$t('income.doc5')}}（USDT）</div>-->
                <!--<span>≈{{datainfo.currentIncome}}</span>-->
              <!--</li>-->
              <!--<li>-->
                <!--<div class="b">{{$t('income.doc6')}}（USDT）</div>-->
                <!--<span>≈{{datainfo.regularIncome}}</span>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</div>-->
        </div>

        <!--//动态收益id2-->
        <div class="head" v-if="cid == 2">
          <div class="head">
            <ul class="db tac">
              <li>
                <div class="b">{{$t('doc.doc2')}}</div>
                <span style="font-size: .44rem;">≈{{datainfo.total}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!--//合约收益-->
        <div class="head" v-if="cid == 4">
          <div class="head">
            <ul class="db tac">
              <li>
                <div class="b">{{$t('doc.doc3')}}</div>
                <span style="font-size: .44rem;">≈{{datainfo.total}}</span>
              </li>
            </ul>
          </div>
        </div>


        <!--//社区收益id3-->
        <div v-if="cid == 3">
          <div class="head">
            <ul class="db tac">
              <li>
                <div class="b">{{$t('doc.doc4')}}</div>
                <span style="font-size: .44rem;">≈{{datainfo.total}}</span>
              </li>
            </ul>
          </div>
        <!--<div class="head">-->
          <!--<ul class="db tac">-->
            <!--<li>-->
              <!--<div class="b">{{$t('income.doc9')}} （USDT）</div>-->
              <!--<span>≈{{datainfo.cmtFinancialIncome}}</span>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div class="b">{{$t('income.doc10')}} （USDT）</div>-->
              <!--<span>≈{{datainfo.cmtSameFinancialIncome}}</span>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->
        <!--<div class="head" v-if="cid == 3" style="margin-top: .2rem;">-->
          <!--<ul class="db tac">-->
            <!--<li>-->
              <!--<div class="b">{{$t('income.doc11')}} （USDT）</div>-->
              <!--<span>≈{{datainfo.cmtMinerIncome}}</span>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div class="b">{{$t('income.doc12')}} （USDT）</div>-->
              <!--<span>≈{{datainfo.cmtSameMinerIncome}}</span>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->
        </div>

        <!--//代理收益id4-->
        <!--<div class="head" v-if="cid == 4">-->
          <!--<ul class="db tac">-->
            <!--<li>-->
              <!--<div class="b">{{$t('income.doc13')}} （USDT）</div>-->
              <!--<span>≈{{datainfo.agentFinancialIncome}}</span>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div class="b">{{$t('income.doc14')}} （USDT）</div>-->
              <!--<span>≈{{datainfo.agentMinerIncome}}</span>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->

        <!--//推荐收益ID5-->
        <div class="head" v-if="cid == 5">
          <ul class="db tac">
            <li>
              <div class="b">{{$t('income.doc15')}}</div>
              <span style="font-size: .44rem;">≈{{datainfo.rcdBuyMinerIncome}}</span>
            </li>
          </ul>
        </div>


        <!--//收益吣ID101-->
        <div class="head" v-if="cid == 101">
          <ul class="db tac">
            <li>
              <div class="b">{{$t('income.doc16')}} </div>
              <span>≈{{datainfo.agentMinerIncome}}</span>
            </li>
            <li>
              <div class="b">{{$t('income.doc17')}} </div>
              <span>≈{{datainfo.agentFinancialIncome}}</span>
            </li>
          </ul>
        </div>





        <div class="sx_line">
          <ul class="db" v-if="cid == 0">
            <li v-for="(item,k) in sx_name" :key="k" @click="sx_click(k)"><img :src="item.img" alt="">{{item.name}}</li>

          </ul>
          <ul class="db" v-else>
            <li v-for="(item,k) in sx_name" :key="k" @click="sx_click(k)" v-if="k < 2"><img :src="item.img" alt="">{{item.name}}</li>
            <li v-if="cid == 3" @click="flink('/member/my_grade')"><img src="../../assets/images/ico_zs.png" alt="">等级</li>
          </ul>
        </div>

        <div class="box1"  v-if="dataList.length != 0">
          <van-list v-model="loading" :finished="finished" :loading-text="$t('load.loading')" :finished-text="$t('load.no_more')" @load="onLoad">
          <ul>
            <li v-for="(item,index) in dataList" :key="index">
              <div class="db" @click="handLine(index)">
                <div class="flex">
                  <h5>{{item.type}}</h5>
                  <span class="c-999">{{item.date}}</span>
                </div>
                <div class="str">
                  <p v-if="item.coinName == 'USDT'">
                    <var :class="{on:item.typeCode == 1}">
                      {{item.usdtAmount}}</var>
                  </p>
                  <p v-else>{{item.amount}}</p>

                  {{item.coinName}}


                </div>
                <div style="margin-left: .1rem;" v-if="$route.query.id == 1">
                  <van-icon name="arrow-down" v-if="!item.status"/>
                  <van-icon name="arrow-up" v-else />
                </div>
              </div>

              <div class="info" v-if="item.status">
                  <ol class="db" v-for="(item2,k2) in item.details">
                    <li class="flex">{{$t('staff.doc50')}}：{{item2.sn}}</li>
                    <li class="s">{{item2.amount}} {{item2.coinName}}</li>
                  </ol>
              </div>

            </li>
          </ul>
          </van-list>
        </div>
        <div class="rel" v-else>
          <div class="empty">
            <img src="../../assets/images/none2.png" alt="">
            <span class="c-999">{{$t('toast.no_data')}}</span>
          </div>
        </div>


      </div>


      <van-popup v-model="is_type" position="bottom" style="border-radius: .2rem .2rem 0 0">
        <div class="tname rel">
          {{$tc('income.doc20',0)}}
          <div class="abs" @click="is_type = false"><van-icon name="cross" /></div>
        </div>
        <div class="group_line">
          <van-radio-group v-model="type_radio">
            <van-cell-group>
              <van-cell :title="item.name" clickable @click="type_ck(item,k)" v-for="(item,k) in typeData" :key="item.id" class="rel">
                <template #right-icon>
                  <div class="abs"></div>
                  <van-radio :name="k" checked-color="#2A64E4"/>
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
      </van-popup>


      <van-popup v-model="is_bi" position="bottom" style="border-radius: .2rem .2rem 0 0">
        <div class="tname rel">
          {{$t('income.doc19')}}
          <div class="abs" @click="is_bi = false"><van-icon name="cross" /></div>
        </div>
        <div class="group_line">
          <van-radio-group v-model="bi_radio">
            <van-cell-group>
              <van-cell :title="item.coinName" @click="bi_ck(item)" v-for="(item,k) in biData" :key="item.id" class="rel">
                <template #right-icon>
                  <div class="abs"></div>
                  <van-radio :name="item.coinId" checked-color="#2A64E4" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
      </van-popup>




      <van-popup v-model="is_time" position="bottom" style="border-radius: .2rem .2rem 0 0">
        <div class="tname rel">
          {{$t('model.set')}}
          <div class="abs" @click="is_time = false"><van-icon name="cross" /></div>
        </div>

        <div class="selects">
          <ul>
            <li class="db">
              <div class="flex" @click="left_time">
                <input type="text" name="" v-model="timeA" class="inp v1" readonly :placeholder="$t('model.starttime')">
              </div>
              <div class="s c-999">{{$t('merchant.zhi')}}</div>
              <div class="flex" @click="right_time">
                <input type="text" name="" class="inp v1" v-model="timeB" readonly :placeholder="$t('model.endtime')">
              </div>
            </li>
          </ul>
        </div>

        <div v-if="showA" >
          <van-datetime-picker
            v-model="currentDateA"
            type="date"
            :title="$t('myinfo.choose_ymd')"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            item-height="0.8rem"
            @confirm="confirmA"
            @change="confirmA"
            :cancel-button-text="$t('word.cancle')"
            :confirm-button-text="$t('word.ok')"
          />
        </div>

        <div v-if="showB">
          <van-datetime-picker
            v-model="currentDateB"
            type="date"
            :title="$t('myinfo.choose_ymd')"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            item-height="0.8rem"
            @confirm="confirmB"
            :cancel-button-text="$t('word.cancle')"
            @change="confirmB"
            :confirm-button-text="$t('word.ok')"
          />
        </div>

        <div class="go">
          <button class="btn" @click="time_go" :class="{on:!is_btn}">{{$t('word.ok')}}</button>
        </div>


      </van-popup>



    </div>
</template>
<script>


  export default {
  data(){
    return {
      cid:this.$route.query.id,
      titleSize:this.$route.query.name,
      is_mt:true,
      sx_name:[
        {img:require("../../assets/images/ico_s6.png"),name:this.$tc('income.doc20',1)},
        {img:require("../../assets/images/ico_s3.png"),name:this.$tc('income.doc20',2)},
        {img:require("../../assets/images/ico_s4.png"),name:this.$tc('income.doc20',0)}
        ],
      datainfo:[],
      is_type:false,
      type_radio:'',
      typeData:[
      ],
      is_bi:false,
      bi_radio:'',
      biData:[
        // {name:'BTC',id:'1'},
        // {name:'FIL',id:'2'},
        // {name:'USDT',id:'3'},
        // {name:'PAM',id:'4'}
      ],
      is_time:false,
      time: "",

      dataList: [],
      totalPage: "",
      pageSize: 20,
      page: 0,
      lastId: 0,
      loading: false,
      finished: false,
      isEmptyList: false,
      isHasList: true,
      requesting: false,
      coinId:'',
      recordType:'',

      showA:true,
      showB:false,
      minDate: new Date(2017, 12 , 1),
      maxDate: new Date(),
      currentDateA: new Date(2017, 12 , 1),
      isTimeA:'',
      isTimeB:'',


      currentDateB: new Date(),
      timeA:'2018-01-01',
      timeB:this.$moment(new Date()).format("YYYY-MM-DD"),

      startTime:this.$moment(new Date(2020, 6 , 1)).format("YYYY-MM-DD"),
      endTime:this.$moment(new Date()).format("YYYY-MM-DD"),
      is_btn:true




    }
  },
    // require
    created() {


      this.$post(this.URL.income.biList,{
        type:this.$route.query.id == 4 ? 2 : this.$route.query.id
      }).then((res) => {
        if (res.code == 0) {
          this.biData = res.data;
        }
      });
      this.$post(this.URL.income.typeList,{
        type:this.$route.query.id == 4 ? 2 : this.$route.query.id
      }).then((res) => {
        if (res.code == 0) {
          this.typeData = res.data;
        }
      });


      this.$post(this.URL.income.typeData,{
        type:this.$route.query.id == 4 ? 2 : this.$route.query.id,
        recordType:this.$route.query.id == 4 ? 200004 : ''
      }).then((res) => {
        if (res.code == 0) {
          this.datainfo = res.data;
        }
      });
    },
    mounted() {
      if(this.$route.query.id == 0) {
        this.titleSize = this.$tc("income.doc28", 1)
        document.title = this.$tc("income.doc28", 1)
      }
      if(this.$route.query.id == 1) {
        this.titleSize = this.$tc("income.doc30", 1)
        document.title = this.$tc("income.doc30", 1)
      }
      if(this.$route.query.id == 2) {
        this.titleSize = this.$tc("income.doc33", 1)
        document.title = this.$tc("income.doc33", 1)
      }
      if(this.$route.query.id == 3) {
        this.titleSize = this.$tc("income.doc34", 1)
        document.title = this.$tc("income.doc34", 1)
      }
      if(this.$route.query.id == 4) {
        this.titleSize = this.$tc("income.doc37", 1)
        document.title = this.$tc("income.doc37", 1)
      }


      this.onLoad()
    },
    watch: {
      dataList(newValue, oldValue) {
        if (newValue.length == 0) {
          this.isHasList = false;
        }else{
          this.isHasList = true;
        }
      },
    },
    methods: {
      handLine(id){
        if(this.$route.query.id == 1){
          this.dataList[id].status = !this.dataList[id].status
        }

      },
      left_time(){
        this.showA = true
        this.showB = false
        if(this.timeB == ''){
          return
        }

        // this.currentDateA = new Date(this.timeB)
        // this.maxDate = new Date(this.timeB)
        // this.minDate = new Date(2017, 12 , 1)
        this.bxTime()
      },
      right_time(){
        this.showB = true
        this.showA = false

        if(this.timeA == ''){
          return
        }
        if(this.timeA == this.timeB){
          // this.maxDate = new Date()
          // this.minDate = new Date(this.timeA)
          // this.currentDateB = new Date(this.timeA)
        }else{
          // this.minDate = new Date(this.timeA)
          // this.currentDateB = new Date(this.timeB)
        }

      },
      bxTime(){
        let oDate1 = new Date(this.timeA);
        let oDate2 = new Date(this.timeB);
        if(oDate1 > oDate2){
          this.is_btn = false
        } else {
          this.is_btn = true
        }

      },



      formatter(type, val) {
        if (type === 'year') {
          return `${val}` + this.$t('model.year');
        } else if (type === 'month') {
          return `${val}` + this.$t('model.month');
        } else if (type === 'day') {
          return `${val}` + this.$t('model.day');
        }
        return val;
      },
      formatterB(type, val) {
        if (type === 'year') {
          return `${val}` + this.$t('model.year');
        } else if (type === 'month') {
          return `${val}` + this.$t('model.month');
        } else if (type === 'day') {
          return `${val}` + this.$t('model.day');
        }
        return val;
      },
      confirmA(val){
        let year = parseInt(val.getValues()[0])
        let month = parseInt(val.getValues()[1]) >= 10 ? parseInt(val.getValues()[1]) : '0' + parseInt(val.getValues()[1])
        let day = parseInt(val.getValues()[2]) >= 10 ? parseInt(val.getValues()[2]) : '0' + parseInt(val.getValues()[2])

        this.timeA = year + '-' + month + '-' + day
        // this.showA = false
        this.startTime = this.timeA
        this.isTimeA = val


        this.bxTime()

        if(this.timeB === ''){
          this.$toast(this.$t('toast.pay_s9'));
          return
        }


      },
      confirmB(val){
        // this.timeB = this.$moment(val).format("YYYY-MM-DD")
        // this.timeB = val.getValues()[0] + '-' + val.getValues()[1] + '-' + val.getValues()[2]
        let year = parseInt(val.getValues()[0])
        let month = parseInt(val.getValues()[1]) >= 10 ? parseInt(val.getValues()[1]) : '0' + parseInt(val.getValues()[1])
        let day = parseInt(val.getValues()[2]) >= 10 ? parseInt(val.getValues()[2]) : '0' + parseInt(val.getValues()[2])

        this.timeB = year + '-' + month + '-' + day



        this.endTime = this.timeB
        this.isTimeB = val

        this.bxTime()
        if(this.timeA === ''){
          this.$toast(this.$t('toast.pay_s8'));
          return
        }



      },




      sx_click(id){
        if(id == 2){
          this.is_type = true
        }else if(id == 1){
          this.is_bi = true
        }else{
          this.is_time = true;
        }
      },
      type_ck(item,k){
        if(this.type_radio === k) {
          this.type_radio = ''
          this.recordType = ''
        }else{
          this.type_radio = k
          this.recordType = item.code
        }


        this.is_type = false;

        this.coinId = '';
        this.dataList = [];
        this.page = 0;
        this.lastId = 0;
        this.finished = false;
        this.isHasList = true;
        this.isEmptyList = true;
        this.get_recordList();
      },
      bi_ck(item){

        if(this.bi_radio == item.coinId) {
          this.bi_radio = ''
          this.coinId = ''
        }else{
          this.bi_radio = item.coinId
          this.coinId = item.coinId
        }



        this.is_bi = false

        this.dataList = [];
        this.page = 0;
        this.recordType = '';
        this.lastId = 0;
        this.finished = false;
        this.isHasList = true;
        this.isEmptyList = true;


        this.get_recordList();
      },
      time_go(){
        if(!this.is_btn){
          this.$toast(this.$t('toast.time_s1'));
          return
        }
        this.is_bi = false
        this.coinId = ''
        this.dataList = [];
        this.page = 0;
        this.recordType = '';
        this.startTime = this.timeA;//	×	开始时间(yyyy-MM-dd)
        this.endTime = this.timeB;
        this.lastId = 0;
        this.finished = false;
        this.isHasList = true;
        this.isEmptyList = true;
        this.is_time = false
        this.get_recordList();
      },

      flink(url){
        this.$router.push({
          path: url,
        });
      },

      timeConf(value) {
        this.is_time = false;
        this.time = this.$moment(value).format("YYYY-MM-DD");

        // this.datainfo.birth = this.time;
      },

      get_recordList() {
        let data = {
          lastId: this.lastId,
          pageSize: this.pageSize,
          type:this.$route.query.id == 4 ? 2 : this.$route.query.id ,//	√	收益类型
          // type:this.recordType,
          recordType:this.$route.query.id == 4 ? 200004 : this.recordType,
          coinId:this.coinId,//	×	币种ID(0或不传则查询全部)
          startTime:this.startTime,//	×	开始时间(yyyy-MM-dd)
          endTime:this.endTime, //	×	结束时间(yyyy-MM-dd)
          page:this.page, //	需要请求的页码(默认: 1)(传lastId则不用传该值

        };
        this.requesting = true;
        this.$post(this.URL.income.record, data).then((res) => {
          this.requesting = false;
          this.loading = false;
          if (res.code == 0) {
            // if (res.data.list.length == 0) {
            //   // this.$toast("暂无数据");
            // }

            // //分页处理
            // this.page = res.data.page.index + 1;
            // if(res.data.page.index == res.data.page.totalPage){
            //     this.finished = true;
            // }
            if(res.data.list.length < res.data.page.pageSize){
              this.finished = true;
            }


            let initData = res.data.list;
            if(res.data.list.length != 0){
              this.lastId = initData[initData.length-1].id;
            }



            // initData.forEach((element) => {
            //   element.isNegative = element.amount.indexOf("-") == 0;
            //   element.coinName =
            //     element.info != null ? element.info.coinName : "";
            // });


            if (this.isEmptyList) {
              this.dataList = [];
              this.dataList.push(...initData);
            } else {
              this.dataList.push(...initData);
            }
            if(this.dataList.length == 0){
              this.isHasList = false;
            }
            this.isEmptyList = false;
          } else {
            //加载 失败时，结束加载 ，防止无线加载
            this.finished = true;
          }

        });
      },
      onLoad() {
        this.get_recordList();

      },


    },


}

</script>


<style lang="less" scoped>
  /deep/ .van-picker__toolbar {
    display: none;
  }
  /deep/ .van-picker__confirm {
    color: #2A64E4;
  }
  /deep/ .van-picker__cancel {
    color: #303030;
  }
  #app {
    .container {
      padding: 0 .2rem .4rem .2rem;
    }

    .head {
      background: #0755cd;
      border-radius: .16rem;
      box-shadow: 0px .1rem .14rem 0px rgba(5,61,195,0.20);
      ul {
        color: #fff;
        padding: .4rem 0;
        li {
          padding: 0 .2rem;
          .b {
            font-size: .24rem;
            line-height: .32rem;
            margin-bottom: .1rem;
          }
          span {
            font-size: .32rem;
            display: block;
            color: rgba(255,223,161,1);
          }
        }
      }
    }

    .head2 {
      background: #ffffff;
      border-radius: .16rem;
      padding: .46rem 0;
      margin-top: .2rem;
      .b {
        font-size: .24rem;
        color: #999999;
        line-height: .3rem;
        margin-bottom: .16rem;
      }
      span {
        font-size: .32rem;
        color: #222222;
        line-height: .32rem;
      }
    }


    .group_line {
      .van-cell {
        line-height: 1rem;
        padding-top: 0;
        padding-bottom: 0;
      }
      .abs {
        height: 100%;top:0;right:0;
        z-index: 2;
        width: .8rem;
      }
    }
    .sx_line {
      margin: .2rem -.1rem;
      li {
        background: #2A64E4;
        border-radius: .12rem;
        box-shadow: 0px .1rem .14rem 0px rgba(0,0,0,0.03);
        text-align: center;
        font-size: .28rem;
        line-height: .34rem;
        padding: .21rem;
        margin: 0 .1rem;
        color: #fff;
        img {
          height: .34rem;
          vertical-align: top;
          margin-right: .1rem;
        }
      }
    }
    .box1 {
      background: #ffffff;
      border-radius: .16rem;
      box-shadow: 0px .1rem .14rem 0px rgba(0,0,0,0.03);
      padding: .1rem .3rem;
      .cname {
        font-size: .26rem;
        font-weight: 600;
        color: #222222;
        img {
          margin-right: .12rem;
          height: .38rem;
        }
      }
      ul {
        li {
          padding: .3rem 0;border-bottom: .01rem solid #ececec;
          &:last-child {
            border:0
          }
          span {
            font-size: .22rem;
            margin-top: .1rem;
            display: block;
          }
          .flex {
            padding-right: .2rem;
            line-height: .28rem;
          }
          .str {
            font-size: .3rem;
            p{
              display: inline-block;
              var {
                display: inline-block;
                vertical-align: 0;
                color: green;
              }
              .on {
                color: red;
              }
            }
          }
        }
      }
      .info {
        border-top:.01rem solid #ececec;
        padding: .1rem 0 0 0;
        margin-top: .15rem;
      }
      ol {
        li {
          padding: .04rem 0;
          font-size: .22rem;
          color: #999;
          border:0;
        }
        .s {
          text-align: right;
        }
      }
    }
    .go {
      padding: .4rem;
      .on {
        background: #ccc;
        box-shadow:none;
      }
    }
    .selects {
      padding: 0 .4rem;
      ul {
        padding: 0 0 .37rem 0;
        li {
          margin-bottom: .2rem;
          .name {
            font-size: .26rem;
            font-weight: 400;
            color: #14191f;
          }
          .s {
            padding: 0 .2rem;
          }
          .inp {
            width: 100%;
            height: .74rem;
            background: #ffffff;
            border: .01rem solid #999999;
            border-radius: .08rem;
            position: relative;
            padding: 0 .2rem;
            vertical-align: top;
            color: #2A64E4;
          }
          .flex {
            position: relative;
            &:after {
              content:'';
              display: block;
              width: 0;
              height: 0;border:.08rem solid transparent;
              position: absolute;
              right: .2rem;top:.34rem;
              border-top-color: #999;
            }
          }

        }
        li:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
